<template>
  <view class="content" :style="{ background: `${data[0].pageColor}` }">
    <block v-if="!loadingPage">
      <!-- #ifdef MP-WEIXIN -->
      <view class="" style="height: 100rpx"> </view>
      <!-- #endif -->
      <x-skeleton type="banner" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton type="menu" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton type="list" :loading="true">
        <view>我是轮播图</view>
      </x-skeleton>
      <x-skeleton
        type="waterfall"
        v-for="(item, index, key) in 100"
        :key="'waterfall' + index"
        :loading="true"
      >
        <view>我是轮播图</view>
      </x-skeleton>
    </block>

    <block>
      <view v-for="(item, index, key) in data" :key="key">
        <navTitleCom
          v-if="item.name == 'page' && item.type !== 4"
          :info="item"
        />
        <!-- #ifdef MP-WEIXIN -->
        <view
          :style="{ height: `${menuInfo.height}px` }"
          v-if="item.name == 'page' && item.type == 4"
        ></view>
        <!-- #endif -->
        <searchCom v-if="item.name == '搜索'" :info="item" />
        <imgCom v-if="item.name == '图片'" :info="item" />
        <bannerCon v-if="item.name == '轮播图'" :info="item" />
        <imgTextNavCom v-if="item.name == '图文导航'" :info="item" />
        <videoCom v-if="item.name == '视频组件'" :info="item" />
        <tabsCom v-if="item.name == '选项卡'" :info="item" />
        <goodsCateCom v-if="item.name == '商品分组'" :info="item" />
        <titleCom v-if="item.name == '标题栏'" :info="item" />
        <wangeditorCom v-if="item.name == '富文本'" :info="item" />
        <textCom v-if="item.name == '文本'" :info="item" />
        <borderCom v-if="item.name == '分割占位'" :info="item" />
        <sellerCom v-if="item.name == '店铺街'" :info="item" />
        <bulletinCom v-if="item.name == '平台公告'" :info="item" />
        <couponCom v-if="item.name == '优惠券'" :info="item" />
        <wenzhangCom v-if="item.name == '文章'" :info="item" />
        <spikeCom v-if="item.name == '秒杀'" :info="item" />
        <spikeCom v-if="item.name == '限时折扣'" :info="item" />
        <NyNjCom v-if="item.name == 'N元N件'" :info="item" />
        <NyNjCom v-if="item.name == '满减活动'" :info="item" />
        <goodsCom
          v-if="item.name == '商品'"
          :info="item"
          :onReachBottomChange="item.ispage == 1 ? onReachBottomChange : ''"
        />
      </view>
    </block>

    <custom-tab-bar
      :path="`/pages/diyPage/diyPage?id=${this.options.id}`"
      :list="data"
    ></custom-tab-bar>
  </view>
</template>

<script>
import customTabBar from "@/components/CustomTabBar";
import navTitleCom from "@/pages/index/components/navTitle.vue";
import searchCom from "@/pages/index/components/search.vue";
import imgCom from "@/pages/index/components/img.vue";
import bannerCon from "@/pages/index/components/banner.vue";
import imgTextNavCom from "@/pages/index/components/imgTextNav.vue";
import videoCom from "@/pages/index/components/video.vue";
import tabsCom from "@/pages/index/components/tabs.vue";
import goodsCateCom from "@/pages/index/components/goodsCate.vue";
import titleCom from "@/pages/index/components/title.vue";
import wangeditorCom from "@/pages/index/components/wangeditor.vue";
import textCom from "@/pages/index/components/text.vue";
import borderCom from "@/pages/index/components/border.vue";
import sellerCom from "@/pages/index/components/seller.vue";
import bulletinCom from "@/pages/index/components/bulletin.vue";
import couponCom from "@/pages/index/components/coupon.vue";
import wenzhangCom from "@/pages/index/components/wenzhang.vue";
import spikeCom from "@/pages/index/components/spike.vue";
import NyNjCom from "@/pages/index/components/NyNj.vue";
import goodsCom from "@/pages/index/components/goods.vue";
import { getToken, setStorage } from "@/utils/storage.js";
import { getEnv } from "@/utils/env.js";
import {
  adornDetail,
  updateParent,
  couponNewcomer,
  couponBirthday,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { handleLoopCallBack } from "../../utils/util";
import { getGloBalData, getStorage } from "../../utils/storage";
import { go } from "../../utils/wxAPI";
export default {
  components: {
    navTitleCom,
    searchCom,
    imgCom,
    bannerCon,
    imgTextNavCom,
    videoCom,
    tabsCom,
    customTabBar,
    goodsCateCom,
    titleCom,
    wangeditorCom,
    textCom,
    borderCom,
    sellerCom,
    bulletinCom,
    couponCom,
    wenzhangCom,
    spikeCom,
    NyNjCom,
    goodsCom,
  },
  data() {
    return {
      popupShow2: false,
      popupShow: false,
      loadingPage: false,
      data: [{}],
      options: {},
      onReachBottomChange: 1,
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.adornDetail();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.adornDetail();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    async adornDetail() {
      let { data } = await adornDetail({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = JSON.parse(data.data.config);
        console.log(info);
        this.data = info;
        setTimeout(() => {
          this.loadingPage = true;
        }, 1000);
      }
    },
  },
  onShareAppMessage: function (e) {
    return {
      title: "乐皇阁",
      path: `/pages/diyPage/diyPage?uid=${getGloBalData("userinfo").id}&id=${
        this.options.id ? this.options.id : ""
      }`,
    };
  },
  onReachBottom() {
    this.onReachBottomChange += 1;
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
.content {
  min-height: 100vh;
}

/* #endif */
</style>
<style scoped lang="scss">
.content {
  min-height: 100vh;
}
</style>
